<template>
    <div class="login">
        <div class="login_left">
            <div>
                <img src="@/assets/logo.png" />
                <h2>计量云</h2>
            </div>
            <p>
                计量云
            </p>
        </div>
        <div class="login_right">
            <div class="login_right_box">
                <h2 style="color:#000">登录</h2>
                <div class="fix">
                    <!-- <div class="login-title" @click="loginClick(0)" :class="loginIndex == 0?'active':''">验证码登录</div> -->
                    <div  class="login-title"  @click="loginClick(1)" :class="loginIndex == 0 ? 'active' : ''" style="margin-right:20px" >密码登录</div>
                    
                </div>
                    <!-- 手机号输入框 -->
                    <el-input
                    v-model="phone"
                    style="height:48px;border-radius:8px"
                    placeholder="请输入手机号"
                    maxlength="11"
                    :prefix-icon="mobilePhoneIcon"
                    />

                    <!-- 密码输入框 -->
                    <el-input
                    v-model="password"
                    show-password="true"
                    style="height:48px;margin:25px 0;border-radius:8px"
                    :type="passwordVisible ? 'text' : 'password'"
                    placeholder="请输入密码"
                    :prefix-icon="Lock"
                    >
                    </el-input>
                <el-button :class="phone?'login-btns':'login-btn'" @click="save(0)">
                    登 录
                </el-button>
               
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="loginIndex">
import { defineAsyncComponent, onMounted, reactive, computed, ref } from 'vue';
import { EyeIcon, User, PhoneFilled, Lock } from '@element-plus/icons-vue'; // 引入眼睛图标
import { ElMessage, ElMessageBox, FormRules, FormInstance } from 'element-plus'

import {Login} from '@/api/login'
import { Session } from '@/utils/storage';
import router from '@/router';

const loginIndex = ref<number>(0);
const phone = ref();
const password = ref()
const passwordVisible = ref(false)
const loginClick = (i:any) => {
    loginIndex.value = i
    
}
const mobilePhoneIcon = User;

const save = async () => {
    const params = reactive({
        account: phone,
        password: password
    })
    const data = await Login(params)
    if (data.code == 200) {
        console.log('data',data)
        Session.set('token', data.data.token)
        Session.set('userInfo', data.data.userInfo)
        localStorage.setItem('userInfo', JSON.stringify(data.data.userInfo))
        router.push('/')

    } else {
        ElMessage({
            type: 'warning',
            message:data.message
        })
    }
}
// 切换密码显示和隐藏
const togglePasswordVisibility = () => {
    passwordVisible.value = !passwordVisible.value;
};
</script>

<style lang="scss" scoped>
.login_bottom{
    display: flex;
    align-items: center;
    margin-top: 25px;
    label{
        cursor: pointer;
    }
}
.active{
    position: relative;
}

.login-btn{
    color: #fff;
    background-color: #b8a9ff;
    border-color: #b8a9ff;
    width: 100%;
    height: 48px;
    border-radius: 8px;
}
.login-btns {
    color: #fff;
    background-color: #7052ff;
    border-color: #b8a9ff;
    width: 100%;
    height: 48px;
    border-radius: 8px;
}
.active::before{
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    color: #7052ff;
    border-bottom: 4px solid #7052ff;
}
.login{
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: space-between;
    &_right{
        width: 50%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        // background: red;
        .login-title{
            margin-top: 30px;
            margin-right: 30px;
            margin-bottom: 30px;


            height: 40px;
        }
        &_box{
            position: relative;
            z-index: 2;
            width: 436px;
            padding: 48px;
            min-height: 461px;
            border-radius: 16px;
            background-color: #fff;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-box-shadow: 0 2px 10px 0 rgba(161, 157, 157, 0.04);
            box-shadow: 0 2px 10px 0 rgb(218, 216, 216)
        }
    }
    &_left {
        width: 50%;
        height: 100vh;
        background-image: url(https://cdn.chaoyongbushou.com/ownweixin/ntld-brackground.png);
        background-position: 0 0;
        background-size: cover;
        background-repeat: no-repeat;
            -webkit-box-flex: 1.5;
        -ms-flex: 1.5;
        flex: 1;
         p{
                font-size: 35px;
                margin-left: 80px;
            }
        div{
            display: flex;
            align-items: center;
            display: flex;
            margin: 50px ;
            color:#000;
            img{
                width: 50px;
                height: 50px;
            }
           
        }
    }
}
</style>